<template>
    <div class="layout">
        <div class="layout-header" :class="{'layout-header-dark':theme =='dark'}">
            <div class="layout-ceiling" :class="{'layout-ceiling-light':theme=='light'}">
                <div style="display: flex;align-items: center"><img @click="goSystem('System')" class="mp-logo"  src="../../assets/logo.jpg"><span class="mp-title">后台管理系统</span></div>

                <div class="layout-ceiling-main">
                    <a href="javascript:void(0)">{{userData.nickname}}</a>
                    <Dropdown style="margin-right: 10px" placement="bottom-end">
                        <a href="javascript:void(0)">
                            {{userData.username}}
                            <Icon type="arrow-down-b"></Icon>
                        </a>
                        <DropdownMenu slot="list">
                            <DropdownItem @click.native="goSystem('notifyPsw')">修改密码</DropdownItem>
                            <router-link to="/login">
                                <DropdownItem>退出</DropdownItem>
                            </router-link>
                        </DropdownMenu>
                    </Dropdown>
                </div>
            </div>
        </div>
        <Row>
            <Col span="3" class="layout-menu-left" :class="{'m-menu-light':theme =='light'}" id="menu-left">
            <Menu ref="mpMenu" :active-name="activeName" :theme="theme" accordion width="auto" @on-select="slcMenu">
                <Submenu :name="subMenu.resourceUrl" v-for="subMenu in menuData" :key="subMenu.resourceUrl">
                    <template slot="title">
                        <Icon :type="subMenu.resourceCss"></Icon>
                        {{subMenu.resourceName}}
                    </template>
                    <router-link :to="{name:menuItem.resourceUrl}" v-for="menuItem in subMenu.childs" :key="menuItem.resourceUrl">
                        <MenuItem :name="menuItem.resourceUrl">{{menuItem.resourceName}}</MenuItem>
                    </router-link>
                </Submenu>
            </Menu>
            </Col>
            <Col span="21" id="menu-right">
            <div class="layout-content" id="content">
                <div class="layout-breadcrumb">
                    <Breadcrumb>
                        <BreadcrumbItem v-for="item in breadCrumb" :key="item.name">{{item.title}}</BreadcrumbItem>
                    </Breadcrumb>
                </div>
                <router-view></router-view>
                <m-lodading :loadingStatus="isLoading"></m-lodading>
            </div>
            </Col>
        </Row>
    </div>
</template>
<script>
    import API from '../../config/api'
    import lodaingComponent from '../../components/loading.vue'
    import menu from '../../router/leftMenu'
    import qs from 'qs'
    import {getStoreJson,setStore,getCookie,removeStore}  from '../../config/utils'
    export default {
        name:'Home',
        components: {
            'm-lodading': lodaingComponent,
        },
        data () {
            return {
                theme:'dark',
                menuData:[],
                breadCrumb:[],
                userData:{},
                activeName:''
            }
        },
        methods:{
            goSystem(name){
                this.$router.push({name:name});
                removeStore('breadCrumb');
                this.activeName = name;
                this.breadCrumb = [];
                this.$nextTick(()=>{
                    this.$refs.mpMenu.updateActiveName();
                })
            },
            skinFn(name){
                this.theme = name;
            },
            //
            slcMenu(name){
                removeStore('breadCrumb');
                this.activeName = name;
                this.menuData.map((menu)=>{
                    menu.childs.map((sub)=>{
                        if(sub.resourceUrl===name){
                            this.breadCrumb = [
                                {
                                    title:menu.resourceName,
                                    name:menu.resourceUrl
                                },
                                {
                                    title:sub.resourceName,
                                    name:sub.resourceUrl
                                },
                            ]
                        }
                    })
                })
                setStore('breadCrumb',this.breadCrumb);
            },
            authorityFn(){
                let vm = this;
                this.axios.get(API.AUTHORITY+vm.userData.authorihyId+'/role/2').then(response => {
                    if(response.data.code ===1){
                        vm.menuData  = response.data.data;
                    }else {
                        this.$Message.error(response.data.msg);
                    }
                }, response => {
                    this.$Message.error('网络异常!');
                })
            }
        },
        created(){
            this.userData = JSON.parse(getCookie('userInfo'));
            this.$store.commit('setUserData',this.userData);
            // this.authorityFn();
            this.menuData = menu;
            let localName  = getStoreJson('breadCrumb') && getStoreJson('breadCrumb').length > 0 ? getStoreJson('breadCrumb')[1].name : 'articleIndex';
            this.slcMenu(localName);
        },
        mounted(){
            var wh = document.body.clientHeight;
            document.getElementById('menu-right').style.height = wh-50 +'px';
            document.getElementById('menu-left').style.height = wh-50 + 'px';
        },
        computed: {
            isLoading() {
                return this.$store.state.isLoading
            }
        }
    }
</script>
<style scoped>
    .mp-logo {
        padding-left: 50px;
        height: 35px;
        cursor: pointer;
    }
    .mp-title{
        color: #FFFFFF;
        font-size: 26px;
    }
    .layout{
        position: relative;
    }
    .layout-breadcrumb{
        padding: 10px 15px 0 0;
    }
    .layout-content{
        padding: 10px 15px 15px 15px;
        background: #fff;
        border-radius: 4px;
        position: relative;
    }
    #menu-right {
        overflow: auto;
    }
    .layout-ceiling-main{
        position: absolute;
        top:0;
        right: 0;
    }
    .layout-content-main{
        padding: 10px;
    }
    .layout-copy{
        text-align: center;
        padding: 15px 0;
        color: #9ea7b4;
        background: #f5f7f9;
    }
    .layout-menu-left{
        background: #464c5b;
        overflow-y: auto;
    }
/*
    .layout-menu-left::-webkit-scrollbar {display:none}
    #menu-right::-webkit-scrollbar {display:none}
*/

/*
    .layout-menu-left::-webkit-scrollbar, #menu-right::-webkit-scrollbar{
             width:5px;
             height:10px;
         }
    .layout-menu-left::-webkit-scrollbar-button, #menu-right::-webkit-scrollbar-button{
        background-color:#FF7677;
    }
    .layout-menu-left::-webkit-scrollbar-track, #menu-right::-webkit-scrollbar-track{
        background:#FF66D5;
    }
    .layout-menu-left::-webkit-scrollbar-thumb, #menu-right::-webkit-scrollbar-thumb{
        background:#FFA711;
        border-radius:4px;
    }
    .layout-menu-left::-webkit-scrollbar-corner, #menu-right::-webkit-scrollbar-corner{
        background:#82AFFF;
    }
    .layout-menu-left::-webkit-scrollbar-resizer, #menu-right::-webkit-scrollbar-resizer{
        background:#FF0BEE;
    }
*/

    .m-menu-light {
        background-color: #fff;
    }
    .layout-header{
        height: 50px;
        background: #fff;
        box-shadow: 0 1px 1px rgba(0,0,0,.1);
    }
    .layout-header-dark {
        background: #464c5b;
    }
    .layout-ceiling{
        background: #464c5b;
        overflow: hidden;
        height: 50px;
        line-height: 50px;
    }
    .layout-ceiling-light {
        background-color: #fff;
    }
    .layout-ceiling-main{
        float: right;
        margin-right: 15px;
    }
    .layout-ceiling-main a{
        color: #9ba7b5;
    }
    .layout-ceiling-light .layout-ceiling-main a{
        color: #2d8cf0;
    }
    .ivu-dropdown {
        margin-left: 15px;
    }
    .layout-ceiling-main {
        font-size: 14px;
    }
</style>
<style>
    .m-modal-info .ivu-modal-footer{
        display: none;
    }
</style>
